<!-- 
	使用方式：
	icon：搜索框签名的icon
	placeholder：input 的提示
	boxStyle： 外边元素的样式
	inStyle：里边元素的样式
	search: 搜索
	<ct-input :icon="false" placeholder="请输入搜索条件" :boxStyle="boxStyle" :inStyle=”inStyle @search="search"></ct-input>
 -->

<template>
	<view class="container w100">
		<view class="w100 o-plr" :style="[boxStyle]">
			<view class="o-ptb-s">
				<view class="l-fjb c-r-max c-of-h" :style="[inStyle]">
					<view class="l-fjb o-ml l-f3 h100">
						<view class="o-pr l-f1 l-fc">
							<u-icon class="o-mr-s" name="search" color="inherit" size="28" v-if="icon"></u-icon>
							<u-input class="c-t6" v-model="value" :cursor-spacing="10" :placeholder="placeholder" :disabled="disabled" :type="type" border="false" />
						</view>
					</view>
					<view @click="searchBtn()" class="l-f1 l-fcc h100 c-t7 c-r-max" :style="[btnStyle]">搜索</view>
				</view>
			</view>
		</view>

		<view style="height: 90rpx"></view>
	</view>
</template>

<script>
	export default {
		name:"hsearch",
		data() {
			return{
				value: '',
				type: 'text'
			}
		},
		props:{
			icon:{
				type:Boolean,
				default:false
			},
			placeholder: {
				type: String,
				default: '请输入搜索条件'
			},
			disabled: {
				type:Boolean,
				default:false
			},
			boxStyle: {
				type: Object,
				default:function() {
					return {
						'background': '#f3f3f3'
					}
				}
			},
			inStyle: {
				type: Object,
				default:function() {
					return {
						'height': '70rpx',
						'background': '#ffffff'
					}
				}
			},
			btnStyle: {
				type: Object,
				default:function() {
					return {
						'color': '#ffffff',
						'background': '#567EFB'
					}
				}
			}
		},
		watch:{
			value(newValue) {
				if(!newValue) {
					this.searchBtn()
				}
			}
		},
		methods:{
			scanCode() {
				this.searchBtn()
			},
			searchBtn() {
				this.$emit('search',this.value)
			}
		}
	}
</script>

<style>
	.b{
		
	}
	
</style>
